import { BasicComponent } from './basic/basic.component';
import { MultipleSelectComponent } from './multiple-select/multiple-select.component';
import { Demo3Component } from './demo3/demo3.component';
import { IconsComponent } from './icons/icons.component';
import { CustomPanelRenderComponent } from './custom-panel-render/custom-panel-render.component';
import { Demo6Component } from './demo6/demo6.component';
import { CustomPanelClassComponent } from './custom-panel-class/custom-panel-class.component';
import { Demo8Component } from './demo8/demo8.component';
import { Demo9Component } from './demo9/demo9.component';
import { SearchCheckAllComponent } from './search-check-all/search-check-all.component';
import { SizeComponent } from './size/size.component';
import { AsyncComponent } from './async/async.component';

export const TreeSelectConfig = {
  location: 'TreeSelect',
  description: '从多层级树结构中选择对象组件',
  description_en: '',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/tree-select/basic/basic.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic use',
      demoDescription: '基础用法。',
      demoDescription_en: 'Basic use.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/tree-select/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'Size',
      demoDescription: '选择框尺寸。',
      demoDescription_en: 'The size of select.',
    },
    {
      demo: MultipleSelectComponent,
      codePath: 'showcase/tree-select/multiple-select/multiple-select.component',
      demoTitle: '多选',
      demoDescription: 'lvSelectionMode 设置为 multiple 时，支持多选。',
      demoTitle_en: `Multiple Selection`,
      demoDescription_en: `When lvSelectionMode is set to multiple, multiple selection is supported.`,
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/tree-select/demo3/demo3.component',
      demoTitle: 'checkbox多选',
      demoDescription: '通过 checkbox 来实现多选目的。',
      demoTitle_en: `Checkbox`,
      demoDescription_en: `Realize multiple selection by checkbox`,
    },
    {
      demo: Demo9Component,
      codePath: 'showcase/tree-select/demo9/demo9.component',
      demoTitle: '自定义checkbox',
      demoDescription: '自定义每个节点checkbox是否显示',
      demoTitle_en: `custom checkbox`,
      demoDescription_en: `Customize whether the checkbox of each node is displayed`,
    },
    {
      demo: SearchCheckAllComponent,
      codePath: 'showcase/tree-select/search-check-all/search-check-all.component',
      demoTitle: '带搜索带全选多选',
      demoTitle_en: 'With search with all choices',
      demoDescription: '带搜索带全选多选',
      demoDescription_en: 'With search with all choices.',
      devDebug: true,
    },
    {
      demo: IconsComponent,
      codePath: 'showcase/tree-select/icons/icons.component',
      demoTitle: '自定义icon',
      demoDescription: `lvShowContentIcon 节点内容前的图标，如果不设置 contentToggleIcon 展示默认图标，contentToggleIcon = ''不展示图标。`,
      demoTitle_en: `Custom Icon`,
      demoDescription_en: `lvShowContentIcon The icon before the content of the node. If contentToggleIcon is not set to display the default icon, contentToggleIcon = '' does not display the icon.`,
    },
    {
      demo: CustomPanelRenderComponent,
      codePath: 'showcase/tree-select/custom-panel-render/custom-panel-render.component',
      demoTitle: '自定义选择器',
      demoDescription: '树模板和选择器支持自定义',
      demoTitle_en: `Customizing Template`,
      demoDescription_en: `Tree templates and selectors can be customized.`,
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/tree-select/demo6/demo6.component',
      demoTitle: '搜索',
      demoDescription: '树中支持搜索。',
      demoTitle_en: `Search`,
      demoDescription_en: `Search in the tree.`,
    },
    {
      demo: CustomPanelClassComponent,
      codePath: 'showcase/tree-select/custom-panel-class/custom-panel-class.component',
      demoTitle: '自定义样式',
      demoDescription: '自定义下拉面板的样式。',
      demoTitle_en: `Custom Style`,
      demoDescription_en: `Customize the style of the panel.`,
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/tree-select/demo8/demo8.component',
      demoTitle: '选中项返回模式',
      demoTitle_en: `Selected item to return to mode`,
      demoDescription: '选中项返回模式，默认返回父子节点，child：只返回子节点，parent：只返回父节点。',
      demoDescription_en: `The selected item returns the mode, the default returns the parent and child nodes, child: only returns the child node, parent: only returns the parent node.`,
    },
    {
      demo: AsyncComponent,
      codePath: 'showcase/tree-select/async/async.component',
      demoTitle: '异步加载',
      demoDescription: '',
      demoTitle_en: 'Asynchronous Loading',
      demoDescription_en: '',
    },
  ],
  useRule: [],
  useSuggestion: ['树的层级建议不要超过5级，不然会导致管理起来的效率降低，且随着横向空间的减少，名称很有可能显示不全，对可读性造成影响。'],
  selector: 'lv-tree-select',
  snippet: `<lv-tree-select></lv-tree-select>`,
  api: [
    {
      attribute: 'LvTreeData',
      type: 'TreeNode[]',
      default: '',
      description: `
      下拉面板中树的源数据。TreeNode 属性如下：
        <ul>
          <li>[key: string] 节点的关键key，具有唯一性 (可选)</li>
          <li>[label: string] 节点显示的名称 (必选)</li>
          <li>[data: any] 节点的data值 (可选)</li>
          <li>[expandedToggleIcon: { true?: string; false?: string } | string] 自定义节点展开收起图标 (可选，规范不建议)</li>
          <li>[contentToggleIcon: { true?: string; false?: string } | string] 节点内容前图标 (可选)</li>
          <li>[indeterminate: boolean] 节点是否半选 (可选)</li>
          <li>[showCheckbox: boolean] 是否显示checkbox (可选)</li>
          <li>[expanded: boolean] 设置节点是否展开(叶子节点无效)，默认值 false (可选)</li>
          <li>[disabled: boolean] 设置是否禁用节点(不可进行任何操作)，默认值 false (可选)</li>
          <li>[hidden: boolean] 是否隐藏选项，默认值 false (可选)</li>
          <li>[isLeaf: boolean] 该节点是否为叶子节点，默认值 false (可选)</li>
          <li>[children: TreeNode[]] 子节点 (可选)</li>
        </ul>
      `,
      description_en: `
      The source data for the tree in the drop-down panel. The TreeNode properties are as follows:
        <ul>
          <li>[key: string] The key key of the node, unique (optional)</li>
          <li>[label: string] node display name (required)</li>
          <li>[data: any] node's data value (optional)</li>
          <li>[expandedToggleIcon: { true?: string; false?: string } | string] Custom node expand and collapse icon (optional, not recommended by spec)</li>
          <li>[contentToggleIcon: { true?: string; false?: string } | string] Icon before node content (optional)</li>
          <li>[indeterminate: boolean] Whether the node is semi-selected (optional)</li>
          <li>[showCheckbox: boolean] whether to show checkbox (optional)</li>
          <li>[expanded: boolean] Set whether the node is expanded (leaf nodes are invalid), the default value is false (optional)</li>
          <li>[disabled: boolean] Set whether to disable the node (no operations can be performed), the default value is false (optional)</li>
          <li>[hidden: boolean] whether to hide the option, the default value is false (optional)</li>
          <li>[isLeaf: boolean] Whether the node is a leaf node, the default value is false (optional)</li>
          <li>[children: TreeNode[]] child nodes (optional)</li>
        </ul>
      `,
    },
    {
      attribute: 'lvDisabled',
      type: 'boolean',
      default: 'false',
      description: '设定disable状态。',
      description_en: 'Set the disable state.',
    },
    {
      attribute: 'lvSize',
      type: 'default | large',
      default: 'default',
      description: `选择框大小。`,
      description_en: `size of select.`,
    },
    {
      attribute: 'ngModel',
      type: 'TreeNode[]',
      default: '',
      description: `选中项。`,
      description_en: `Selected item.`,
    },
    {
      attribute: 'lvTreeAsync',
      type: 'boolean',
      default: '',
      description: `下拉面板中树请求是否为异步。`,
      description_en: `Is it asynchronous.`,
    },
    {
      attribute: 'lvTreeSelectionMode',
      type: `'single' | 'multiple'`,
      default: 'single',
      description: '树选择支持：单选、多选。',
      description_en: 'Tree Selection Support: radio, checkbox.',
    },
    {
      attribute: 'lvTreeSelectionAssociate',
      type: 'boolean',
      default: 'true',
      description: `树选择关联，选中是否关联父子选中。`,
      description_en: `Select association, select whether to associate parent and child.`,
    },
    {
      attribute: 'lvTreeCompareWith',
      type: 'string | ((o: any) => any)',
      default: '',
      description: `data被选中的比较方式，默认地址比较。`,
      description_en: `Data comparison method selected, default address comparison.`,
    },
    {
      attribute: 'lvTreeShowCheckbox',
      type: 'boolean',
      default: 'false',
      description: `树是否显示checkbox。`,
      description_en: `Whether to display the checkbox.`,
    },
    {
      attribute: 'lvTreeSelectedByCheckbox',
      type: 'boolean',
      default: 'false',
      description: `树是否只能checkbox选中。`,
      description_en: `Can only checkbox selected.`,
    },
    {
      attribute: 'lvShowClear',
      type: 'boolean',
      default: 'false',
      description: `单选模式下，是否显示清除按钮。`,
      description_en: `In single mode,Whether to display the clear button.`,
    },
    {
      attribute: 'lvKeepExpanded',
      type: 'boolean',
      default: 'true',
      description: `过滤条件清除之后是否保留展开能力。如不更改为false过滤后不可通过Collapse All按钮收起，参考带搜索带全选多选DEMO`,
      description_en: `Indicates whether to retain the expansion capability after filtering conditions are cleared. If you do not change the value to false, the Collapse All button cannot be used to collapse the filter. For details, see Demo with Search and Multiple Selections.`,
    },
    {
      attribute: 'lvTreeShowLine',
      type: 'boolean',
      default: 'true',
      description: `树是否展示连接线。`,
      description_en: `Whether to display the cable.`,
    },
    {
      attribute: 'lvSelectedValueMode',
      type: `'parent' | 'child' | 'both'`,
      default: 'both',
      description: `选中项返回模式，默认返回父子节点，child：只返回子节点，parent：只返回父节点。`,
      description_en: `The selected item returns the mode, the default returns the parent and child nodes, child: only returns the child node, parent: only returns the parent node.`,
    },
    {
      attribute: 'lvVirtualScroll',
      type: 'boolean',
      default: 'false',
      description: '是否支持虚拟滚动',
      description_en: 'Whether to support virtual scroll',
    },
    {
      attribute: 'lvTreeShowContentIcon',
      type: 'boolean',
      default: '',
      description: `树是否显示内容前icon。`,
      description_en: `Whether to display content before icon.`,
    },
    {
      attribute: 'lvBlockNode',
      type: 'boolean',
      default: 'false',
      description: `是否节点占据一行`,
      description_en: `whether the node occupies a row.`,
    },
    {
      attribute: 'lvPanelClass',
      type: 'string',
      default: '',
      description: `自定义下拉面板的样式类。`,
      description_en: `Customizing the style class of the panel.`,
    },
    {
      attribute: 'lvPanelWidth',
      type: `'adaptInput' | 'auto' | string | number`,
      default: `'adaptInput'`,
      description: `自定义下拉面板的宽度。'adaptInput' 下拉面板宽度取决于输入框宽度， 'auto' 下拉面板宽度跟随面板内容变化。`,
      description_en: `Customizing the width of the panel.`,
    },
    {
      attribute: 'lvPlaceholder',
      type: 'string',
      default: '',
      description: '选择框默认文字。',
      description_en: 'Select default text.',
    },
    {
      attribute: 'lvFilterKey',
      type: 'string',
      default: '',
      description: '搜索的主键。',
      description_en: 'Searched primary key.',
    },
    {
      attribute: 'lvFilterMode',
      type: `'contains' | 'endsWith' | 'startsWith' | 'equals' | 'in' | 'timeIn' | 'rangIn'`,
      default: 'contains',
      description: '搜索模式。',
      description_en: 'Search mode.',
    },
    {
      attribute: 'lvTreeBeforeSelected',
      type: '(source: TreeNode) => boolean | Promise<Boolean> | Observable<Boolean>',
      default: '--',
      description: `选中前的回调函数，支持可执行函数、Promise、Observe，返回值为false可阻止选中。`,
      description_en: `Callback function before selection. Executable functions, Promise, and Observe are supported. If the return value is false, the selection is blocked.`,
    },
    {
      attribute: 'lvLoading',
      type: 'boolean',
      default: 'false',
      description: '是否为加载中状态。',
      description_en: 'Indicates whether the status is loading.',
    },
    {
      attribute: 'lvBeforeOpen',
      type: 'fn',
      default: '',
      description: '打开下拉面板前的回调函数，执行异步事件时，返回值为false可阻止打开。',
      description_en:
        'The callback function before the drop-down panel is opened. When an asynchronous event is executed, the return value is false to prevent the drop-down panel from being opened.',
    },
    {
      attribute: 'lvVirtualMaxBuffer',
      type: 'number',
      default: '0',
      description: '缓冲区最大像素高度',
      description_en: 'Maximum pixel height of buffer'
    },
    {
      attribute: 'lvVirtualMinBuffer',
      type: 'number',
      default: '0',
      description: '缓冲区最小像素高度',
      description_en: 'Minimum pixel height of buffer'
    },
  ],
  event: [
    {
      event: 'ngModelChange',
      parameter: ``,
      description: '选中项变化回调。',
      description_en: 'Selected item change callback.',
    },
    {
      event: 'lvExpandedChange',
      parameter: ``,
      description: '节点展开变化回调。',
      description_en: 'Node expansion change callback.',
    },
    {
      event: 'lvOpenChange',
      parameter: ``,
      description: '切换选择下拉回调事件。',
      description_en: 'Toggle selection drop-down callback event.',
    },
    {
      event: 'lvFilterChange',
      parameter: `value`,
      description: '触发搜索后的回调函数，参数 value 为 value: event。',
      description_en: 'Callback function after the search is triggered. The parameter value is value: event.',
    },
    {
      event: 'lvScrollEnd',
      parameter: ``,
      description: '虚拟滚动到底部时回调事件',
      description_en: 'Callback event when virtual scrolling to the bottom.'
    },
    {
      event: 'lvScrollingChange',
      parameter: ``,
      description: '虚拟滚动中回调事件',
      description_en: 'Virtual scrolling callback event.'
    },
  ],
};
